<template>
  <div>
    <div class="cardContain">
      <!-- 卡片 -->
      <div class="card">
        <!-- 名字 评分 封面 -->
        <div class="card_name_rate_cover flexbet">
          <!-- 名字 评分 -->
          <div class="card_name_rate">
            <div class="flexcolcenter card_name">
              <div class="name overtxt">
                {{ info.courseName }}XXXXXXXXXXXXXXXXXXXXXX
              </div>
            </div>
            <!-- 负责老师 -->
            <div class="flex card_item">
              <div class="card_item_lable">主讲老师</div>
              <div class="card_item_value" style="color: #ef7d00">
                {{ info.trianNames ? info.trianNames : "--" }}
              </div>
            </div>
            <div class="flex card_item">
              <div class="card_item_lable">基准学时</div>
              <div class="card_item_value">
                <span style="color: #e95756"
                  >{{ info.studyTime ? info.studyTime : "--" }} 时</span
                >
              </div>
            </div>
          </div>
          <!-- 封面 -->
          <image
            @click="preview([info.coursePic])"
            class="coursePic"
            :src="info.coursePic ? info.coursePic : ''"
          ></image>
        </div>

        <!-- 学分数据 -->
        <div class="flexbet card_credit">
          <div class="card_credit_item">
            <div class="card_credit_item_value">{{ info.credit }}</div>
            <div class="card_credit_item_lable">学分</div>
          </div>
          <div class="card_credit_item">
            <div class="card_credit_item_value">{{ info.taskCount }}</div>
            <div class="card_credit_item_lable">总{{ lableConfig.task }}数</div>
          </div>
          <div class="card_credit_item">
            <div class="card_credit_item_value">{{ info.fileCount }}</div>
            <div class="card_credit_item_lable">总课程资料</div>
          </div>
          <div class="card_credit_item">
            <div class="card_credit_item_value">{{ info.examCount }}</div>
            <div class="card_credit_item_lable">总考试数</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 课程其他信息 -->
    <div class="course_info">
      <div class="course_info_lable">材料/设备</div>
      <rich-text class="course_info_value" :nodes="info.describe"></rich-text>
      <div class="course_info_lable">课程描述</div>
      <rich-text class="course_info_value" :nodes="info.describe"></rich-text>
    </div>
  </div>
</template>

<script>
import courseType from "@/components/courseType";
export default {
  components: { courseType },
  props: {
    info: Object,
  },
  watch: {
    info(e) {
      console.log("---", e);
      this.lableConfig = getApp().globalData.$lableConfig;
    },
  },
  data() {
    return { lableConfig: "" };
  },
  methods: {
    preview(urls) {
      uni.previewImage({
        current: "", // 当前显示图片的链接，可选项
        urls: urls, // 需要预览的图片链接列表
        success: function () {
          console.log("预览图片成功");
        },
        fail: function (error) {
          console.log("预览图片失败", error);
        },
      });
    },
  },
  name: "message",
};
</script>

<style scoped lang='scss'>
.card_item {
  margin-top: 16rpx;
  .card_item_lable {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }

  .card_item_value {
    width: 280rpx;
    margin-left: 24rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    .card_item_value_children {
      margin-right: 40rpx;
    }
  }
}
.cardContain {
  background: #fafafa;
  box-sizing: border-box;
  padding: 20rpx 0 94rpx 32rpx;
  .card {
    padding: 40rpx 40rpx 32rpx 40rpx;
    width: 686rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(22, 66, 163, 0.12);
    border-radius: 16rpx;
    box-sizing: border-box;
    .card_name_rate_cover {
      .card_name_rate {
        margin-top: 4rpx;
        .card_name {
          height: 44rpx;
          .name {
            max-width: 400rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
          }
        }
      }

      .coursePic {
        width: 152rpx;
        height: 94rpx;
        border: 1rpx solid #fafafa;
        box-sizing: border-box;
        border-radius: 24rpx;
      }
    }

    .card_credit {
      padding: 0 40rpx;
      margin-top: 32rpx;
      .card_credit_item {
        text-align: center;
        .card_credit_item_value {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 44rpx;
          text {
            font-size: 28rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 50rpx;
          }
        }

        .card_credit_item_lable {
          margin-top: 4rpx;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 36rpx;
        }
      }
    }
  }
}

.course_info {
  padding: 40rpx 32rpx 0 32rpx;
  .course_info_lable {
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
  }

  .course_info_value {
    margin-bottom: 64rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    .course_info_value_image {
      margin: 0 20rpx 20rpx 0;
      border: 1rpx solid #fafafa;
      height: 232rpx;
    }
  }
}
</style>
